
/**
 *  @type View Component
 *  @role 用于页面Card卡片展示，纯view组件.
 *  @createDate Mr.Liu on 2017.06.02.15:15
 */

import React from "react";

import {Progress,Tooltip} from 'antd';

export default function Card (props){
    const {labelInfo,data} = props;

    let productName = [];   // 储存头部中间商品信息 , 数组格式， 需分解;

    if(Array.isArray(data.orderGoodss)){        // 拆分orderGoodss[Array]中的productName[string]储存到productName变量
        productName = data.orderGoodss.map((item,index)=> item.productName);
    }

    return<div className="order_upDownStream_cardItem">
            <span className="order_upDownStream_cardItem_label" data-color={labelInfo.color}>
                {labelInfo.title}
            </span>
            <div className="order_upDownStream_infoHeader">
                <div className="order_upDownStream_head_optionItem">
                    <span> 合同编号： </span>
                    <strong> {data.signedContract || "-"} </strong>
                </div>
                <div className="order_upDownStream_head_optionItem">
                    <span> 订单编号：</span>
                    <strong> {data.oid || "-"} </strong>
                </div>
            </div>
            <div className="order_upDownStream_infoSection">
                <p className="order_upDownStream_head_InfoDes">
                    {productName.length !== 0 ? productName.join(",") : "-"}
                </p>
                <div className="order_upDownStream_head_optionItem">
                    <span> 供应方：</span>
                    {data.partBName}
                </div>
            </div>
            <footer className="order_upDownStream_infoFooter">
                <div className="order_upDownStream_card_footerItem">
                    <span> 订单金额 ：</span>
                    <Tooltip overlayClassName="order_upDownStream_card_tooltip" title={
                        (data.account / 100) && `金额： ${(data.account / 100).toFixed(2)} 元`
                    }>
                        <strong className="order_upDownStream_head_price">
                            ￥{(data.account/100).toFixed(2) || "-"}
                        </strong>
                    </Tooltip>

                </div>
                <div className="order_upDownStream_card_footerItem">
                    <span> 采购数量 ：</span>
                    <Tooltip  overlayClassName="order_upDownStream_card_tooltip"  title={
                        data.orderGoodsNum && `数量：${data.orderGoodsNum}`
                    }>
                        <strong className="order_upDownStream_head_num">
                            {data.orderGoodsNum || "-"}
                        </strong>
                    </Tooltip>
                </div>
                <Progress className="order_upDownStream_card_progress"
                          percent={parseInt((data.sendQuanty/data.orderGoodsNum)*100)}
                          showInfo={false}
                          strokeWidth="12"
                          status="active"
                />
                <span className="order_upDownStream_card_progress_View">
                    发货进度: {((data.sendQuanty/data.orderGoodsNum)*100).toFixed(2)}%
                </span>
            </footer>
        </div>
}